<template>
  <div>
    <h1>订单列表</h1>


    <el-table :data="ordList" border style="width: 100%">
      <el-table-column prop="order_id" label="#" width="180" />
      <el-table-column prop="order_number" label="订单编号" width="180" />
      <el-table-column prop="order_price" label="订单价格" />
      <el-table-column prop="pay_status" label="是否付款" >
        <template #default="scope">
          <el-tag class="ml-2" type="danger" v-if="scope.row.pay_status==0">未付款</el-tag>
          <el-tag class="ml-2" type="success" v-if="scope.row.pay_status==1">已付款</el-tag>
          <el-tag class="ml-2" type="success" v-if="scope.row.pay_status==2">待付款</el-tag>
          
        </template>

      
      </el-table-column>

      <el-table-column prop="is_send" label="是否发货" />
      <el-table-column prop="create_time" label="下单时间" />
      <el-table-column prop="address" label="操作" />
    </el-table>


        <el-pagination
      v-model:currentPage="pagenum"
      v-model:page-size="pagesize"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />

  </div>
</template>

<script setup>
import { getOrder } from '../../api/order'
import { ref, reactive } from 'vue'
let ordList = ref([])
let pagenum = ref(1)
let pagesize = ref(5)
let total = ref(0)
let orderList = async () => {
  let data = {
    pagenum: pagenum.value,
    pagesize: pagesize.value
  }
  let res = await getOrder(data)

  ordList.value = res.data.data.goods
  total.value = res.data.data.total;
  console.log(res);
}
orderList()

//当每页显示条数发生改变时触发
let sizeChange = (value) => {
  pagesize.value = value;
orderList()
  console.log(pagesize.value);

}

let currentChange = (value) => {

  pagenum.value = value;
 orderList()
  console.log(pagenum.value);
}
</script>



<style>
</style>